<template>
	
	<view class="page-box">
		<uni-section title="基本信息" type="line"></uni-section>
		<view class="form-box">
			<view>
				<view>{{ formList[0].lable }}</view>
				<input v-model="house[formList[0].name]" type="text" :placeholder="`请填写` + formList[0].lable" placeholder-style="color:#bdbdbd" />
			</view>
			<view>
				<view>{{ formList[1].lable }}</view>
				<input v-model="house[formList[1].name]" type="text" :placeholder="`请填写` + formList[1].lable" placeholder-style="color:#bdbdbd" />
			</view>
			<view>
				<view>{{ formList[2].lable }}</view>
				<view class="more-input">
					<input type="text" v-model="layout.room" /><text>室</text>
					<input type="text" v-model="layout.liveRoom" /><text>厅</text>
					<input type="text" v-model="layout.toilet" /><text>卫</text>
				</view>
			</view>
			<view>
				<view>{{ formList[3].lable }}</view>
				<input v-model="house[formList[3].name]" type="text" :placeholder="`请填写` + formList[3].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[3].unit}}</text>
			</view>
			<view>
				<view>{{ formList[4].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[4])" :range="formList[4].array" range-key="val">
						<view :class="formList[4].index === '' ? 'c-gray' : ''">{{ formList[4].index === "" ? '请选择'+formList[4].lable : formList[4].array[formList[4].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[5].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[5])" :range="formList[5].array" range-key="val">
						<view :class="formList[5].index === '' ? 'c-gray' : ''">{{ formList[5].index === "" ? '请选择'+formList[5].lable : formList[5].array[formList[5].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[6].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[6])" :range="formList[6].array" range-key="val">
						<view :class="formList[6].index === '' ? 'c-gray' : ''">{{ formList[6].index === "" ? '请选择'+formList[6].lable : formList[6].array[formList[6].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[7].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[7])" :range="formList[7].array" range-key="val">
						<view :class="formList[7].index === '' ? 'c-gray' : ''">{{ formList[7].index === "" ? '请选择'+formList[7].lable : formList[7].array[formList[7].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[8].lable }}</view>
				<view class="more-input">
					<text>第</text><input type="text" v-model="floor.myFloor" /><text>层</text>
					<text>共</text><input type="text" v-model="floor.allFloor" /><text>层</text>
				</view>
			</view>			
			<view>
				<view>{{ formList[9].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[9])" :range="formList[9].array" range-key="val">
						<view :class="formList[9].index === '' ? 'c-gray' : ''">{{ formList[9].index === "" ? '请选择'+formList[9].lable : formList[9].array[formList[9].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[10].lable }}</view>
				<input v-model="house[formList[10].name]" type="text" :placeholder="`请填写` + formList[10].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[10].unit}}</text>
			</view>			
			<view>
				<view>{{ formList[11].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[11])" :range="formList[11].array" range-key="val">
						<view :class="formList[11].index === '' ? 'c-gray' : ''">{{ formList[11].index === "" ? '请选择'+formList[11].lable : formList[11].array[formList[11].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[12].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[12])" :range="formList[12].array" range-key="val">
						<view :class="formList[12].index === '' ? 'c-gray' : ''">{{ formList[12].index === "" ? '请选择'+formList[12].lable : formList[12].array[formList[12].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>			
		</view>		
		<uni-section title="销售信息" type="line"></uni-section>
		<view class="form-box sale-box">
			<view>
				<view>房屋售价</view>
				<input v-model="house_price" type="text" placeholder="请填写房屋售价" placeholder-style="color:#bdbdbd" />
				<text>万元</text>
			</view>
			<view class="two-line-box">
				<view>分佣比例</view>
				<view class="two-line">
					<view>
						<input v-model="saler_ratio" type="text" placeholder="请填写买方佣金" placeholder-style="color:#bdbdbd" />
						<text>%</text>
					</view>
					<view>
						<input v-model="buyer_ratio" type="text" placeholder="请填写卖方佣金" placeholder-style="color:#bdbdbd" />
						<text>%</text>
					</view>
				</view>
			</view>
		</view>			
		<view class="big-btn" @click="fnSubmit">下一步</view>
	</view>
</template>

<script>
import store from '@/store/store.vue'
import uniSection from '@/components/uni-section/uni-section.vue';
export default {
	components: {
		uniSection
	},
	onLoad(option) {
		this.house = JSON.parse(option.house)		
	
		let index1 = this.house.house_layout.indexOf('室')
		let index2 = this.house.house_layout.indexOf('厅')
		let index3 = this.house.house_layout.indexOf('卫')
		let str = this.house.house_layout
		this.layout.room = str.substring(0, index1)		
		this.layout.liveRoom = str.substring(index1 + 1, index2)
		this.layout.toilet = str.substring(index2 + 1, index3)
		let arr = this.house.house_floor.split(';')
		this.floor.myFloor = arr[0]
		this.floor.allFloor = arr[1]
		this.formList[4].index = this.house.house_layout_structure
		this.formList[5].index = this.house.house_renovation_condition
		this.formList[6].index = this.house.orientation_of_house
		this.formList[7].index = this.house.is_equipped_with_elevator
		this.formList[9].index = this.house.period_of_house
		this.formList[11].index = this.house.type_of_residence
		this.formList[12].index = this.house.condition_of_mortgage
		arr = this.house.commission_share_ratio.split(';')
		this.saler_ratio = arr[0]
		this.seller_ratio = arr[1]
		console.log(this.house)
	},
	data() {
		return {
			house:{
				community_name: '',
				specific_location: '',
				house_layout: '',
				house_area: '',
				house_layout_structure: 0,
				house_cenovation_condition: 0,
				orientation_of_house: 0,
				isEquipped_with_elevator: 0,
				house_floor:'',
				period_of_house: 0,
				age_of_architecture: '',
				type_of_residence: 0,
				condition_of_mortgage: 0
			},
			layout:{
				room: '',
				liveRoom: '',
				toilet: ''
			},
			floor:{
				myFloor: '',
				allFloor: ''
			},
			// TODO app启动时，查询字段表然后合成formList
			formList: [
				{
					lable: '小区名称',
					type: 1,
					name: 'community_name'
				},
				{
					lable: '具体位置',
					type: 1,
					name: 'specific_location'
				},
				{
					lable: '房屋户型',
					type: 4,
					name: 'house_layout'
				},
				{
					lable: '房屋面积',
					type: 2,
					name: 'house_area',
					unit: '㎡'
				},
				{
					lable: '户型结构',
					type: 3,
					name: 'house_layout_structure',
					index: '',
					array: [{ val: '平层' }, { val: '复式' }, { val: '错层' }, { val: '跃层' }]
				},
				{
					lable: '装修情况',
					type: 3,
					name: 'house_renovation_condition',
					index: '',
					array: [{ val: '毛坯' }, { val: '普通装修' }, { val: '精装修' }]
				},
				{
					lable: '房屋朝向',
					type: 3,
					name: 'orientation_of_house',
					index: '',
					array: [{ val: '朝南' }, { val: '朝东' }, { val: '朝西' }, { val: '朝北' }]
				},
				{
					lable: '配备电梯',
					type: 3,
					name: 'is_equipped_with_elevator',
					index: '',
					array: [{ val: '有电梯' }, { val: '无电梯' }]
				},
				{
					lable: '房屋楼层',
					type: 5
				},
				{
					lable: '房本年限',
					type: 3,
					name: 'period_of_house',
					index: '',
					array: [{ val: '不满2年' }, { val: '满2年' }, { val: '满5年' }]
				},
				{
					lable: '建筑年代',
					type: 2,
					name: 'age_of_architecture',
					unit: '年'
				},
				{
					lable: '房屋类型',
					type: 3,
					name: 'type_of_residence',
					index: '',
					array: [{ val: '住宅' }, { val: '别墅' }]
				},
				{
					lable: '抵押情况',
					type: 3,
					name: 'condition_of_mortgage',
					index: '',
					array: [{ val: '无抵押' }, { val: '有抵押' }]
				}
			]			
		};
	},
	methods: {
		bindPickerChange: function(e, box) {			
			box.index = e.detail.value
			this.house[box.name] = parseInt(e.detail.value) + 1	
		},	
		fnSubmit() {		
			let _this = this
			console.log(this.house)
			this.house.houseFloor = this.floor.myFloor + ';' + this.floor.allFloor;
			this.house.houseLayout =  this.layout.room + ';' + this.layout.liveRoom + ';' + this.layout.toilet				
			uni.request({
			    url: store.url + '/house/correct_second_house',
				method: 'POST',
			    data: JSON.stringify(_this.house),
			    header: {
					"content-type": "application/json;charset=utf-8"						
			    },
			    success: (res) => {						
					console.log(res)
					if(res.data.status == 'success'){												
						uni.navigateTo({
							url: '/pages/house/state?pageType=3'
						})					
					}else{
						uni.showModal({
						    title: '提示',
						    content: '提交失败: ' + res.data.message
						});									
					}										        
			    },
				fail: (res)=>{
					uni.showModal({
					    title: '提示',
					    content: '访问服务器失败: ' + res.data.message
					});						
				}
			});	
		}
	}
};
</script>

<style lang="scss" scoped>
.sale-box > view {
	align-items: flex-start;
}

.sale-box .rate-box {
	flex: 1;
	
	text {
		display: block;
		border-bottom: 1px solid #e5e5e5;
		
		&:last-of-type {
			border-bottom: none;
		}
	}
}
.page-box {
	padding-bottom: 88rpx;
	box-sizing: border-box;

	/deep/ .uni-section {
		margin-top: 0;
		background: #fff;
	}

	/deep/ .line {
		background-color: #f13b32;
	}
}

.form-box {
	margin-bottom: 20rpx;
	padding-left: 40rpx;
	box-sizing: border-box;
	background: #fff;

	> view {
		display: flex;
		border-bottom: 1px solid #e5e5e5;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;

		&:last-of-type {
			border-bottom: none;
		}

		> view {
			width: 140rpx;
			line-height: 80rpx;
			font-size: 24rpx;

			&.more-input {
				display: flex;
				flex: 1;
				align-items: center;

				input {
					flex: 1;
					padding: 0;
					height: 40rpx;
					border-bottom: 1px solid;
					text-align: center;
				}
			}
		}

		input,
		.uni-input {
			padding: 20rpx 40rpx 20rpx 0;
			box-sizing: border-box;
			flex: 1;
			height: 80rpx;
			line-height: 40rpx;
		}

		text,
		uni-icons {
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		picker {
			flex: 1;
			
			view {
				font-size: 24rpx;
			}
		}
	}
}

.big-btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	line-height: 88rpx;
	text-align: center;
	color: #fff;
	background: #f13b32;
}
</style>
